<template>
  <div class="enroll">
    <van-cell-group title="基本信息">
      <van-field
        :value="formData.realname"
        required
        input-align="right"
        id="realname"
        label="姓名"
        placeholder="请输入姓名"
        :focus="errorFocusAttribute==='realname'"
        :error="!!errorMessage.realname"
        @change="onChangeInput"
        @click-icon="onClickIcon"
      />

      <van-field
        :value="formData.idcardno"
        type="idcard"
        required
        maxlength="18"
        input-align="right"
        id="idcardno"
        label="身份证号"
        placeholder="请输入身份证号"
        :focus="errorFocusAttribute==='idcardno'"
        :error="!!errorMessage.idcardno"
        @change="onChangeInput"
      />

      <single-picker
        required
        :value="formData.nation"
        :data="options.nations"
        id="nation"
        label="民族"
        placeholder="请选择民族"
        :focus="errorFocusAttribute==='nation'"
        :error="!!errorMessage.nation"
        @change="onCheckedNation"
      />

      <single-picker
        :value="formData.politic"
        :data="options.politics"
        required
        id="politic"
        label="政治面貌"
        placeholder="请选择政治面貌"
        :focus="errorFocusAttribute==='politic'"
        :error="!!errorMessage.politic"
        @change="onCheckedPolitics"
      />

      <single-picker
        required
        :value="formData.education"
        :data="options.educations"
        id="education"
        label="文化程度"
        placeholder="请选择文化程度"
        :focus="errorFocusAttribute==='education'"
        :error="!!errorMessage.education"
        @change="onCheckedEducation"
      />

      <van-field
        required
        :value="formData.school"
        input-align="right"
        id="school"
        label="毕业院校"
        placeholder="请输入毕业院校"
        :focus="errorFocusAttribute==='school'"
        :error="!!errorMessage.school"
        @change="onChangeInput"
      />

      <date-picker
        :value="formData.workdate"
        :start="formatAgeDate(age.max)"
        :end="formatAgeDate(age.min)"
        required
        fields="month"
        id="workdate"
        label="参加工作时间"
        placeholder="请选择参加工作时间"
        :focus="errorFocusAttribute==='workdate'"
        :error="!!errorMessage.workdate"
        @change="onCheckWorkdate"
      />

      <van-field
        :value="formData.company"
        required
        input-align="right"
        id="company"
        label="工作单位"
        placeholder="请输入工作单位"
        :focus="errorFocusAttribute==='company'"
        :error="!!errorMessage.company"
        @change="onChangeInput"
      />

    </van-cell-group>

    <van-cell-group title="注册特派员信息">
      <single-picker
        :value="formData.type"
        :data="options.registerTypes"
        required
        id="type"
        label="注册类型"
        placeholder="请选择特派员注册类型"
        :focus="errorFocusAttribute==='type'"
        :error="!!errorMessage.type"
        @change="onCheckedRegisterTypes"
      />
      <van-field
        :value="formData.scope"
        input-align="right"
        icon="question-o"
        id="scope"
        label="研究领域"
        placeholder="请输入研究领域"
        :focus="errorFocusAttribute==='scope'"
        :error="!!errorMessage.scope"
        @click-icon="onClickIcon"
        @change="onChangeInput"
      />
    </van-cell-group>

    <van-cell-group
      title="工作简历"
      custom-class="textarea-cell"
    >
      <van-field
        :value="formData.resume"
        type="textarea"
        :maxlength="1000"
        :autosize="textareaOption"
        id="resume"
        label="简历信息"
        placeholder="您可以直接输入工作简历或者选取简历文件上传"
        :focus="errorFocusAttribute==='resume'"
        :error="!!errorMessage.resume"
        @change="onChangeInput"
      />
    </van-cell-group>
    <van-cell-group title="联系方式">
      <van-field
        :value="formData.mobile"
        type="number"
        required
        input-align="right"
        id="mobile"
        label="手机号"
        placeholder="请输入手机号"
        :focus="errorFocusAttribute==='mobile'"
        :error="!!errorMessage.mobile"
        @change="onChangeInput"
      />
      <van-field
        :value="formData.email"
        input-align="right"
        id="email"
        label="联系邮箱"
        placeholder="联系邮箱"
        @change="onChangeInput"
      />
    </van-cell-group>

    <div class="form-action">
      <van-button
        type="info"
        round
        @click="onSubmit"
      >提交注册</van-button>
    </div>
  </div>
</template>

<script>
import navbar from '@/components/navbar'
import card from '@/components/card'
import { userAuthent } from '@/api'
import { formatDate } from '@/utils/index'
import options from '@/utils/options'
import dist from '@/utils/countries'
import MultiPicker from '@/components/form/multiPicker'
import DatePicker from '@/components/form/datePicker'
import SinglePicker from '@/components/form/singlePicker'
import MapCell from '@/components/form/mapCell'
export default {
  components: {
    navbar,
    card,
    MultiPicker,
    SinglePicker,
    DatePicker,
    MapCell
  },

  data () {
    return {
      id: 0,
      options: options,
      textareaOption: {
        maxHeight: 150,
        minHeight: 100
      },
      popup: {
        nation: false,
        workdate: false,
        blood: false,
        clothsize: false
      },
      errorFocusAttribute: '',
      multiArray: dist,
      age: {
        min: 0,
        max: 65
      },
      minDate: new Date(1949, 10, 1).getTime(),
      maxDate: new Date().getTime(),
      currentDate: new Date().getTime(),
      errorMessage: {
        // 基本信息
        realname: '',
        idcardno: '',
        nation: '',
        politic: '',
        education: '',
        school: '',
        workdate: '',
        company: '',
        // 注册特派员信息
        type: '',
        scope: '',
        // 工作简历
        resume: '',
        // 联系信息
        mobile: ''
      },
      fieldOptions: {
        realname: {
          error: false,
          errorMessage: '请输入姓名信息',
          required: true
        },
        idcardno: {
          error: false,
          errorMessage: '请输入您的身份证号码',
          required: true
        },
        nation: {
          error: false,
          errorMessage: '请选择民族',
          required: true
        },
        politic: {
          error: false,
          errorMessage: '请选择政治面貌',
          required: true
        },
        education: {
          error: false,
          errorMessage: '请选择文化程度',
          required: true
        },
        school: {
          error: false,
          errorMessage: '请输入毕业院校',
          required: true
        },
        workdate: {
          error: false,
          errorMessage: '请选择参加工作时间',
          required: true
        },
        company: {
          error: false,
          errorMessage: '请输入您的工作单位名称',
          required: true
        },
        type: {
          error: false,
          errorMessage: '请选择注册类型',
          required: true
        },
        scope: {
          error: false,
          errorMessage: '请输入您的研究领域',
          callback: (value, data) => {
            if (data.type === '科技创新特派员' && !value) {
              return false
            } else {
              return true
            }
          }
        },
        mobile: {
          error: false,
          errorMessage: '请输入您的手机号',
          required: true
        },
        resume: {
          error: false,
          errorMessage: '请输入个人简历或者上传简历文件',
          required: true
        }
      },
      formData: {
        // 基本信息
        realname: '',
        idcardno: '',
        nation: '',
        politic: '',
        education: '',
        school: '',
        workdate: '',
        company: '',
        // 注册特派员信息
        type: '',
        scope: '',
        // 工作简历
        resume: '',
        // 联系信息
        mobile: '',
        email: ''
      }
    }
  },
  onLoad (option) {
    this.id = option.id
    console.log(option)
    console.log('小程序 [page-blog] 生命周期: onLoad: 监听页面加载')
  },
  // 跳转后页面
  mounted () {
    console.log(this.id)
  },
  watch: {
    currentDate (value) {
      this.formData.workdate = formatDate(value)
    },
    formData: {
      handler (now, old) {
        console.log('当前表单数据', now)
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    console.log('entryform created')
  },
  methods: {
    onCheckWorkdate (date) {
      console.log('选择的工作日期', date)
      this.formData.workdate = date
    },
    onCheckedRegisterTypes (data) {
      console.log('选择的注册类型', data)
      this.formData.type = data
    },
    onCheckedNation (data) {
      console.log('选择的民族', data)
      this.formData.nation = data
    },
    onCheckedPolitics (data) {
      console.log('选择的政治面貌', data)
      this.formData.politic = data
    },
    onCheckedEducation (data) {
      console.log('选择的学历', data)
      this.formData.education = data
    },
    formatAgeDate (age) {
      let now = new Date()
      let year = now.getFullYear() - age
      now.setFullYear(year)
      let date = formatDate(now)
      return date
    },
    onChangeInput (e) {
      const key = e.mp.target.id
      console.log(key, this.errorFocusAttribute)
      if (key !== this.errorFocusAttribute) {
        this.errorFocusAttribute = key
      }
      console.log(e.mp)
      if (Object.prototype.hasOwnProperty.call(this.formData, key)) {
        this.formData[key] = e.mp.detail
      }
    },
    validateAttributes () {
      let hasError = false
      const data = this.formData
      let options = this.fieldOptions
      for (let attribute in data) {
        if (Object.prototype.hasOwnProperty.call(options, attribute)) {
          let fieldRule = options[attribute]
          if (this.validateAttribute(fieldRule, attribute)) {
            fieldRule.error = false
            this.errorMessage[attribute] = ''
          } else {
            fieldRule.error = true
            this.errorMessage[attribute] = fieldRule.errorMessage
            if (!hasError) {
              hasError = true
              this.errorFocusAttribute = attribute
            }
            break
          }
        }
      }
      return !hasError
    },
    validateAttribute (rule, name) {
      const attributeData = this.formData[name]
      if (rule.required && !attributeData) {
        return false
      } else if (rule.callback) {
        const validated = rule.callback(attributeData, this.formData)
        console.log('callback validated', validated)
        return validated
      } else {
        return true
      }
    },
    onSubmit () {
      if (!this.validateAttributes()) {
        wx.showToast({
          title: this.errorMessage[this.errorFocusAttribute],
          icon: 'none',
          duration: 2000
        })
        return
      }
      userAuthent(this.formData).then(res => {
        console.log(res)
        mpvue.setStorageSync('mine', res)
        wx.switchTab({
          url: '/pages/user/main'
        })
        wx.showToast({
          title: '个人资料提交成功',
          icon: 'none',
          duration: 2000
        })
      })
      console.log(this.formData)
    }
  }
}
</script>

<style lang="less">
.form-action {
  padding: 30px 15px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  .van-button {
    padding: 0 20px;
    min-width: 200px;
    height: 40px !important;
  }
}
.enroll {
  background: #f1f2f3;
  .van-cell {
    padding: 15px !important;
    &__title {
      flex: none;
    }
    &-group {
      &__title {
        padding: 20px 15px 10px !important;
      }
    }
  }
  .textarea-cell {
    .van-cell {
      flex-direction: column;
      &__value {
        margin-top: 10px;
      }
    }
    &__input {
      white-space: nowrap;
    }
  }
}
</style>
